<!-- src/components/CampusChat.vue -->
<template>
  <div class="chat-container">
    <!-- 顶部导航栏 -->
    <header class="chat-header">
      <button class="back-btn" @click="goToHistoryPage">
        <i class="fa fa-times"></i>
      </button>
      
      <div class="avatar-container">
        <div class="bot-avatar">
          <i class="fa fa-robot"></i>
        </div>
        <div class="bot-info">
          <h1>校园智能助手</h1>
        </div>
      </div>
    </header>

    <!-- 对话内容区域 -->
    <main class="chat-content">
      <!-- 欢迎消息 -->
      <div v-if="messages.length === 0" class="welcome-area">
        <div class="welcome-card">
          <div class="avatar-container">
            <div class="bot-avatar big">
              <i class="fa fa-robot"></i>
            </div>
            <div class="bot-info">
              <h2>校园智能助手</h2>
            </div>
          </div>
          <p>您好！有什么可以帮助您的吗？</p>
        </div>
        
        <!-- 快捷问题 -->
        <div class="quick-questions">
          <button @click="sendQuickMessage('查看今天的课程安排')">
            查看今天的课程安排
          </button>
          <button @click="sendQuickMessage('图书馆现在开放吗？')">
            图书馆现在开放吗？
          </button>
          <button @click="sendQuickMessage('如何查询成绩？')">
            如何查询成绩？
          </button>
        </div>
      </div>

      <!-- 消息列表 -->
      <div class="messages">
        <div v-for="(message, index) in messages" :key="index" class="message">
          <!-- 智能体消息 -->
          <div v-if="!message.isUser" class="bot-message">
            <div class="bot-avatar">
              <i class="fa fa-robot"></i>
            </div>
            <div class="message-content bot">
              <div class="sender-info">
                <span>校园智能助手</span>
                <span class="time">{{ message.time }}</span>
              </div>
              <p>{{ message.content }}</p>
            </div>
          </div>

          <!-- 用户消息 -->
          <div v-else class="user-message">
            <div class="message-content user">
              <p>{{ message.content }}</p>
            </div>
            <div class="user-avatar">
              <i class="fa fa-user"></i>
            </div>
          </div>
        </div>

        <!-- 正在输入提示 -->
        <div v-if="isTyping" class="bot-message">
          <div class="bot-avatar">
            <i class="fa fa-robot"></i>
          </div>
          <div class="message-content bot">
            <div class="sender-info">
              <span>校园智能助手</span>
            </div>
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 输入区域 -->
    <footer class="input-area">
      <textarea
        v-model="inputMessage"
        @keyup.enter="sendMessage"
        placeholder="请输入消息..."
        :style="{ height: textareaHeight }"
        @input="adjustTextareaHeight"
      ></textarea>
      <button 
        @click="sendMessage"
        :disabled="!inputMessage.trim()"
        class="send-btn"
      >
        <i class="fa fa-paper-plane"></i>
      </button>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      isTyping: false,
      textareaHeight: '40px'
    };
  },
  methods: {
    goToHistoryPage() {
      console.log('返回历史对话页面');
    },
    
    sendQuickMessage(content) {
      this.inputMessage = content;
      this.sendMessage();
    },
    
    sendMessage() {
      if (!this.inputMessage.trim()) return;
      
      const userMessage = {
        content: this.inputMessage.trim(),
        isUser: true,
        time: this.getCurrentTime()
      };
      this.messages.push(userMessage);
      
      this.inputMessage = '';
      this.textareaHeight = '40px';
      this.scrollToBottom();
      
      this.isTyping = true;
      
      setTimeout(() => {
        this.isTyping = false;
        let reply = this.generateReply(userMessage.content);
        
        const botMessage = {
          content: reply,
          isUser: false,
          time: this.getCurrentTime()
        };
        this.messages.push(botMessage);
        this.scrollToBottom();
      }, 1500);
    },
    
    generateReply(message) {
      if (message.includes('课程')) {
        return `您今天的课程安排如下：\n\n1. 上午 9:00-11:00 数学分析\n2. 下午 14:00-16:00 英语写作\n3. 晚上 19:00-21:00 计算机基础`;
      } else if (message.includes('图书馆')) {
        return `图书馆当前开放时间为：\n\n周一至周五：8:00-22:00\n周末：9:00-20:00\n\n目前处于开放状态，欢迎前往学习！`;
      } else if (message.includes('成绩')) {
        return `您可以通过以下方式查询成绩：\n\n1. 登录学校官网 -> 学生门户 -> 成绩查询\n2. 使用校园APP -> 学习 -> 成绩查询\n3. 前往教务处窗口查询`;
      } else {
        const responses = [
          "您好！我是校园智能助手，可以帮您查询课程、图书馆信息、成绩等校园相关问题。",
          "有什么我可以帮您的吗？您可以询问关于课程安排、校园设施、学习资源等问题。",
          "欢迎使用校园智能助手！请问您需要了解什么信息？"
        ];
        return responses[Math.floor(Math.random() * responses.length)];
      }
    },
    
    getCurrentTime() {
      const now = new Date();
      return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
    },
    
    adjustTextareaHeight() {
      const textarea = document.querySelector('textarea');
      textarea.style.height = 'auto';
      const newHeight = Math.min(textarea.scrollHeight, 120);
      this.textareaHeight = `${newHeight}px`;
    },
    
    scrollToBottom() {
      setTimeout(() => {
        const main = document.querySelector('.chat-content');
        main.scrollTop = main.scrollHeight;
      }, 100);
    }
  },
  mounted() {
    window.addEventListener('resize', this.scrollToBottom);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.scrollToBottom);
  }
};
</script>

<style scoped>
/* 基础样式 */
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white;
}

/* 头部样式 */
.chat-header {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.back-btn {
  border: none;
  background: none;
  color: #666;
  font-size: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.avatar-container {
  display: flex;
  align-items: center;
}

.bot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(to right, #4299e1, #9f7aea);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-avatar.big {
  width: 40px;
  height: 40px;
}

.bot-info {
  margin-left: 10px;
}

.bot-info h1, .bot-info h2 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

/* 内容区域 */
.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.welcome-area {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 30px;
}

.welcome-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
}

.welcome-card p {
  color: #666;
  font-size: 14px;
  margin: 5px 0 0 42px;
}

.quick-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-questions button {
  text-align: left;
  padding: 12px 15px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.quick-questions button:hover {
  background-color: #f5f5f5;
}

/* 消息样式 */
.messages {
  margin-top: 10px;
}

.message {
  margin-bottom: 15px;
}

.bot-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.user-message {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
}

.message-content {
  max-width: 85%;
  padding: 10px 15px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.message-content.bot {
  background-color: #f1f1f1;
  color: #333;
  border-top-left-radius: 4px;
}

.message-content.user {
  background-color: #4299e1;
  color: white;
  border-top-right-radius: 4px;
}

.sender-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 12px;
}

.sender-info .time {
  color: #999;
  margin-left: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ddd;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

/* 正在输入提示 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 5px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 输入区域 */
.input-area {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid #eee;
}

.input-area textarea {
  flex: 1;
  border: none;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 10px 15px;
  resize: none;
  font-size: 14px;
  min-height: 40px;
  max-height: 120px;
}

.input-area textarea:focus {
  outline: none;
}

.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4299e1;
  color: white;
  border: none;
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 隐藏滚动条 */
.chat-content::-webkit-scrollbar {
  display: none;
}

.chat-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>